<template>
	<view>
		<view class="padding-sm">
			<u-search v-model="value" @clear="clear" @change="change" @custom="custom" @search="search" :shape="shape"
				:clearabled="clearabled" :show-action="showAction" :input-align="inputAlign" :placeholder="'请输入交易员昵称'"
				:actionStyle="{color:'#fff'}"></u-search>
		</view>
		<!-- 内容部分 -->
		<scroll-view class="panel-scroll-box" scroll-y="true" @scrolltolower="loadMore" style="margin-top: 5px;">
			<!-- 委托列表 -->
			<view>
				<view class="cu-card case" v-for="(item, index) in tabItem.newsList" :key="index">
					<view class="cu-item shadow">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<image class="cu-avatar round " :src="item.user.avatar" mode="" @tap="detail(item)">
								</image>
								<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
								<view class="content flex-sub">
									<view class="text-grey flex justify-between">
										{{item.user.nickname ? item.user.nickname :item.user.username }}
										<view class="text-gray text-sm">
											<button class="cu-btn bg-yellow round sm"
												@tap="follow(item)">{{i18n.leader.follow}}</button>
										</view>
									</view>
									<view class="text-gray text-sm flex justify-between">
										{{i18n.leader.jointime}}：{{item.addtime_text}}

									</view>
								</view>
							</view>
						</view>
						<view class="flex" style="  position: inherit; " @tap="detail(item)">
							<!-- <view class="flex-sub  margin-xs radius text-center">
								<view class="tit ">火币</view>
								<text class="text-gray ">交易所</text>
							</view> -->
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit ">{{item.persons}}</view>
								<text class="text-gray ">{{i18n.leader.peoples}}</text>
							</view>
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit ">{{item.trade_num}}</view>
								<text class="text-gray ">{{i18n.leader.trades}}</text>
							</view>
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit  " :class="item.user.B1total >=0 ? ' uni-up' : ' uni-down' ">
									{{item.user.B1total}}</view>
								<text class="text-gray ">{{i18n.leader.profit}}</text>
							</view>
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit " :class="item.user.B2total >=0 ? ' uni-up' : ' uni-down' ">
									{{item.user.B2total}}%</view>
								<text class="text-gray ">{{i18n.leader.rate}}</text>
							</view>
						</view>
						<!-- <view class="flex" style="  position: inherit; " @tap="detail(item)">
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit ">{{item.position}}</view>
								<text class="text-gray ">仓位</text>
							</view>
							
						</view> -->

					</view>
				</view>
			</view>

			<!-- 上滑加载更多组件 -->
			<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
		</scroll-view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	// import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import countdownTime from '@/components/countdown-timer.vue'
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;

	export default {

		components: {
			// mixPulldownRefresh,
			mixLoadMore,
			countdownTime
		},
		data() {
			return {
				page: 1,
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				category_id: 0,
				TabCur: 0, //当前选项卡索引
				tabItem: {
					name: 'USDT',
					newsList: [],
					loadMoreStatus: 0, //加载更多 0加载前，1加载中，2没有更多了
					refreshing: 0,
					page: 1,
				},
				sum: 0,
				value: '',
				shape: 'round',
				clearabled: true,
				showAction: true,
				inputAlign: 'left'
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			},
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadNewsList('add');
		},
		methods: {
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			//列表
			loadNewsList(type) {
				let tabItem = this.tabItem;
				console.log(type)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					tabItem.page = 1;
				}
				// 请求数据
				let send = {
					page: tabItem.page,
				};

				this.$http.post('Follow', send).then(res => {
					let list = res.data.data;
					if (type === 'refresh') {
						tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						tabItem.refreshing = false;
						// #endif
						tabItem.loadMoreStatus = 0;
					}
					list.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						tabItem.newsList.push(item);
					})

					tabItem.loadMoreStatus = res.data.current_page >= res.data.last_page ? 2 : 0;
					tabItem.page += 1;
				})

			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			detail(item) {
				let data = item
				uni.navigateTo({
					url: `/pages/follow/person?data=${JSON.stringify(data)}`,
				})
			},
			follow(item) {
				this.$http.post('Follow.bind', item).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							title: this.i18n.popup.success
						})
						this.loadNewsList('refresh');
						// setTimeout(() => {
						// 	this.$api.prePage()
						// }, 800)
					}
				})
			},
			change(value) {
				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				console.log(value);
				if (!value) {
					this.loadNewsList('refresh');
				}
			},
			custom(value) {
				//console.log(value);
				// this.$u.toast('输入值为：' + value)
				this.$http.post('Follow.leaderinfo', {
					find: value
				}).then((res) => {
					console.log(res)
					this.tabItem.newsList = []; //刷新前清空数组
					this.tabItem.newsList.push(res.data)
				})
			},
			search(value) {
				// this.$u.toast('输入值为：' + value)
				// this.$refs.uToast.show({
				// 	title: '搜索内容为：' + value,
				// 	type: 'success'
				// })
				this.$http.post('Follow.leaderinfo', {
					find: value
				}).then((res) => {
					console.log(res)
					this.tabItem.newsList = []; //刷新前清空数组
					this.tabItem.newsList.push(res.data)
				})
			},
			clear() {
				console.log(this.value);
				this.value = ''

			}
			// tabSelect(e) {
			// 	this.tabCurrentIndex = e.currentTarget.dataset.id;
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// }
		}
	}
</script>

<style scoped>
	.tit {
		font-weight: 600;
	}

	.swiper-box {
		min-height: 800px;
	}

	.panel-scroll-box {
		height: 800px;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}
</style>
